<!DOCTYPE html>
<html>

<head>test promise</head>

<body>
    <div>
        <input id="myinput" type="text" value="101" />
        <button onclick="doPromise()">执行promise</button>
        <button onclick="doPromiseError()">执行promiseError</button>
        <button onclick="doPromiseSolve()">主动包装</button>
    </div>
</body>
<script type="text/javascript">
    // Promise对象就是一个可以被异步触发的函数
    // 入参就是一个函数包装器
    // 该包装器就封装了两个方法可以在任意条件被调用
    // 永远记得Promise一旦被定义就会被执行
    let myPromise = new Promise((ok, failed) => {
        // 其实建立对象就会立即执行下面的日志直接打印了
        console.log("promise已经执行了");
        // 注意，ok是一个方法，failed也是一个方法
        if (document.getElementById("myinput").value > 100) {
            // 当页面加载的时候，会立即执行Promise对象此时，OK永远也不会执行了
            // 因为myinput的值是一个'空字符串',所以OK永远无法执行了
            ok(1);
        } else {
            // 所以永远会走到failed
            failed(2);
        }
        console.log("promise已经执行了.End");
    });
    // 因为myPromise对象已经被确定，所以只能走fail逻辑了
    function doPromise() {
        myPromise.then((i) => {
            alert("OK=" + i);
        }, (i) => {
            alert("failed=" + i);
        });
    }

    // 可以将失败逻辑写到catch方法中，这样比传给then更好看
    // 在实践中也是鼓励这么做的
    // 将Promise写成try catch finally的样式
    // catch是then(null, failHandler)或者then(undefined, failHandler)的别名
    function doPromiseError() {
        myPromise.then((i) => {
            alert("OK=" + i);
        }).catch((i) => {
            alert("catch_error=" + i);
        }).finally(() => {
            alert("final执行无论成功失败都执行")
        });
    }

    // 静态包装器
    // 包装出一个状态fullfil的Promise对象
    // 四种参数
    // 1.入参是一个Promise对象，则原封不动返回这个Promise对象
    // 2.入参是一个任意object对象，则返回到then的成功处理中
    // 3.入参是一个thennable对象，即包含then方法的对象，会包装成Promise并立即执行then方法
    // 4.入参不传，则返回一个空Promise对象
    function doPromiseSolve() {
        let prom = Promise.resolve({ a: 100 });
        prom.then((o) => {
            alert(o.a); // 打印100
        });
    }
</script>

</html>